{% extends "AcmeDemoBundle::report.html.twig" %} {% block javascript %}
<script type="text/javascript" src="{{ asset('bundles/acmedemo/js/highcharts.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/acmedemo/js/exporting.js') }}"></script>
<link rel="stylesheet" type="text/css"
    href="{{ asset('bundles/acmedemo/css/default/easyui.css') }}" />
<link rel="stylesheet" type="text/css"
    href="{{ asset('bundles/acmedemo/css/icon.css') }}" />
<script type="text/javascript"
    src="{{ asset('bundles/acmedemo/js/jquery.easyui.min.js') }}"></script>
<script type="text/javascript">
	$(function(){
		 $("#list").hide();

		
		$('#report').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Tổng số nhân lực có {{tongnv}} người'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                            	
                            	doSearch(this.name);
                            	
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Phầm trăm',
                data: [
                    {% for trinhdo in lstTrinhDo %}
	                    {% if loop.index >= lstTrinhDo|length %}
	                    ['{{trinhdo.ten}}',{{trinhdo.phantram}}]
	                    {% else %}
	                    ['{{trinhdo.ten}}',{{trinhdo.phantram}}],
	                    {% endif %}
                    {% endfor %}
                ]
            }]
        });
    
		
	});
	function doSearch(name){
		  $( "#list" ).show();
	        $('#tt').datagrid('load',{  
	            name: name
	        });  
	    }
	

</script>

{% endblock %} {% block content %}
<div class="grid_16">
	<!-- TABS START -->
	<div id="tabs">
		<div class="container">
			<ul>
			<li><a href="{{ path('acme_Baocaonhanluc') }}" ><span>Báo cáo nhân lực</span></a></li>
				<li><a href="{{ path('acme_Baocaocongtac') }}"><span>Báo cáo số năm công tác
                            </span></a></li>
                <li><a href="{{ path('acme_Baocaotuoidang') }}"><span>Báo cáo tuổi đảng</span></a></li>
				<li><a href="{{ path('acme_Baocaotrinhdo') }}" class="current" ><span>Báo cáo trình độ</span></a></li>
				<li><a href="{{ path('acme_Baocaothidua') }}"><span>Báo cáo thi đua</span></a></li>
			</ul>
		</div>
	</div>
	<!-- TABS END -->
</div>
<div class="grid_16" id="content">

	<div class="grid_9">
		<h1 class="report">Báo cáo trình độ</h1>
	</div>

	   <div style="width: 940px;display: inline;float: left;">
	       <div id="report" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
	
        </div>
        <div id="list" class="grid_16">

            <table id="tt" class="easyui-datagrid" title="Danh sách nhân viên"
                style="width: 900px" rownumbers="true" pagination="true"
                data-options="rownumbers:true,singleSelect:true,url:'{{ path('acme_baocao_trinhdo_json') }}'">
                <thead data-options="frozen:true">
                    <tr>
                        <th data-options="field:'hoten',width:200">Họ tên</th>
                    </tr>
                </thead>
                <thead>
                    <tr>
                        <th data-options="field:'diachi',width:400,align:'center'">Địa
                            chỉ</th>
                        <th data-options="field:'ngaysinh',width:90,align:'center'">Ngày
                            sinh</th>
                        <th data-options="field:'dienthoai',width:90,align:'center'">Điện
                            thoại</th>
                        <th data-options="field:'phongban',width:90,align:'center'">Phòng
                            ban</th>
                        <th data-options="field:'chucvu',width:90,align:'center'">Chức
                            vụ</th>
                        <th data-options="field:'ngayvaolam',width:90,align:'center'">Ngày
                            vào làm</th>
                        <th data-options="field:'ngayvaodang',width:90,align:'center'">Ngày
                            vào đảng</th>
                        <th data-options="field:'trinhdo',width:90,align:'center'">Trình
                            độ</th>
                        <th data-options="field:'mucluong',width:50,align:'center'">Mức
                            lương</th>
                        <th data-options="field:'hesoluongcv',width:50,align:'center'">Hệ
                            số lương cv</th>
                        <th data-options="field:'tinhbaohiem',width:50,align:'center'">Tính
                            bảo hiểm</th>
                        <th data-options="field:'tinhantrua',width:50,align:'center'">Tính
                            ăn trưa</th>
                        <th data-options="field:'tienphucap',width:90,align:'center'">Tiền
                            phụ cấp</th>
                    </tr>
                </thead>
            </table>
        
            

        </div>
        </div>
{% endblock %}
